<template>
  <div class="container">
    <Bread />
    <div class="conte edition-heart">
      <div class="banner">
        <img src="../../../public/images/banner.4c6b6225.png" alt="" />
      </div>
      <div class="sort">
        <ul>
          <span>排序：</span>
          <li
            v-for="(item, index) in sort"
            :key="index"
            :class="{ active: index === sortTar }"
            @click="sortFn(index)"
          >
            {{ item.title }}
          </li>
        </ul>
      </div>
      <div class="categorize">
        <ul>
          <span>分类：</span>
          <li
            v-for="(item, index) in categorize"
            :key="index"
            :class="{ active: index === categorizeTar }"
            @click="categorizeFn(index)"
          >
            {{ item.title }}
          </li>
        </ul>
      </div>
      <div class="shops">
        <Shops :arr="list" />
        <div class="Loading">
          <i v-if="!isReachBottom" class="iconfont icon-jiazai"></i>
          <span v-if="isReachBottom">已经到底了！</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import Bread from '@/components/bread/bread.vue'
import { ref, reactive, inject, watch, onMounted, onBeforeUnmount } from 'vue'
import Shops from '@/components/shops/shops.vue'
import { ApiProducts } from './api'
import { getScrollTop, getClientHeight, getScrollHeight } from '@/utils'

const { searchFn } = inject('data') as {
  searchFn: any
}

const sortTar = ref<number>(0)
const categorizeTar = ref<number>(0)

const sort = [
  { title: '全部' },
  { title: '我能兑换的' },
  { title: '0-500分' },
  { title: '500-1000分' },
  { title: '1000-1500分' },
  { title: '1500-2500分' },
]

const categorize = [
  { title: '全部' },
  { title: '实物商品' },
  { title: '虚拟商品' },
]

const searchKey = reactive<IGoodsParams>({
  did: 0,
  type: 0,
  min: null as any,
  max: null as any,
  keyword: searchFn.value,
})

const list = ref<IGoodsData[]>([])

const dataVal = ref<IGoodsData[]>([])

// 判断数据是否加载完毕
const isReachBottom = ref<boolean>(false)

// 节流开关
const isLoading = ref<boolean>(false)

// 页码
const pag = ref<number>(1)

// 渲染条数
const size = ref<number>(8)

// 发送请求
const getData = () => {
  ApiProducts(searchKey).then((res) => {
    pag.value = 1
    if (res.code === 0) {
      dataVal.value = res.data!
      list.value = res.data!.filter((item, index) => index < size.value)

      isReachBottom.value = false

      if (list.value.length === dataVal.value.length) {
        isReachBottom.value = true
        return
      }
    }
  })
}

getData()

// 排序筛选
const sortFn = (val: number) => {
  searchKey.keyword = null!
  if (val === 0) {
    searchKey.max = 0
    searchKey.min = 0
  } else if (val === 1) {
    searchKey.max = 100
  } else if (val === 2) {
    searchKey.min = 0
    searchKey.max = 500
  } else if (val === 3) {
    searchKey.min = 500
    searchKey.max = 1000
  } else if (val === 4) {
    searchKey.min = 1000
    searchKey.max = 1500
  } else if (val === 5) {
    searchKey.min = 1500
    searchKey.max = 2500
  }
  sortTar.value = val
  getData()
}

// 分类排序
const categorizeFn = (val: number) => {
  searchKey.keyword = null!
  if (val === 0) {
    searchKey.type = 0
  } else if (val === 1) {
    searchKey.type = 1
  } else if (val === 2) {
    searchKey.type = 2
  }
  categorizeTar.value = val
  getData()
}

// 滚动加载
const scrollFn = () => {
  if (getScrollTop() + getClientHeight() >= getScrollHeight() - 100) {
    // 判断是否加载完成
    if (list.value.length === dataVal.value.length) {
      isReachBottom.value = true
      return
    }

    if (!isLoading.value) {
      isLoading.value = true
      // 下一页
      pag.value += 1
      setTimeout(() => {
        for (
          let i = (pag.value - 1) * size.value;
          i < pag.value * size.value;
          i++
        ) {
          // 添加数据
          dataVal.value[i] && list.value.push(dataVal.value[i])
          isLoading.value = false
        }
      }, 500)
    }
  }
}

onMounted(() => {
  window.addEventListener('scroll', scrollFn)
})

onBeforeUnmount(() => {
  window.removeEventListener('scroll', scrollFn)
})

watch(
  () => searchFn.value,
  () => {
    searchKey.keyword = searchFn.value
    getData()
  },
)
</script>

<style lang="less" scoped>
@import '../../../public/font-icon/iconfont.css';
.container {
  background-color: #f5f5f5;

  .conte {
    font-size: 18px;
    padding-bottom: 50px;
    .sort,
    .categorize {
      padding-top: 32px;
      ul {
        display: flex;
        align-items: center;

        span {
          font-weight: bold;
        }
        li {
          color: #999;

          padding-right: 20px;
          cursor: pointer;
        }
      }

      .active {
        color: #0a328e;
        font-weight: 700;
      }
    }

    .categorize {
      padding-bottom: 32px;
    }

    .shops {
      .Loading {
        margin-top: 30px;
        text-align: center;
        i {
          display: inline-block;
          font-size: 30px;
          animation: my 1s linear infinite;
          color: #0a328e;
          font-size: 30px;
        }
        @keyframes my {
          from {
            transform: rotate(0deg);
          }
          to {
            transform: rotate(360deg);
          }
        }
      }
    }
  }
}
</style>
